<template>
  <!-- 导航 -->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>质量管理</el-breadcrumb-item>
        <el-breadcrumb-item>常见缺陷</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <!-- 搜索栏-->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-form :model="defectQuery" inline>
        <el-form-item label="缺陷描述">
          <el-input v-model="defectQuery.defectDescription"/>
        </el-form-item>
        <el-form-item label="检测项类型">
          <el-select style="width: 100px" v-model="defectQuery.defectType">
            <el-option :value="1" label="外观检查"/>
            <el-option :value="2" label="结构检查"/>
            <el-option :value="3" label="尺寸检测"/>
            <el-option :value="4" label="涂层检查"/>
            <el-option :value="5" label="焊接检查"/>
            <el-option :value="6" label="质量检查"/>
            <el-option :value="7" label="连接检查"/>
            <el-option :value="8" label="原材料检查"/>
          </el-select>
        </el-form-item>
        <el-form-item label="缺陷等级">
          <el-select style="width: 100px" v-model="defectQuery.defectGrade">
            <el-option :value="1" label="轻微"/>
            <el-option :value="2" label="中等"/>
            <el-option :value="3" label="严重"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadDefects" type="primary"><el-icon><Search /></el-icon>搜索</el-button>
          <el-button @click="refresh" type="primary"plain><el-icon><Refresh /></el-icon>重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 工具栏 -->
  <el-row style="margin: 0px 10px;background-color: ghostwhite;padding: 0px 10px">
    <el-col :span="24">
      <el-button-group>
        <el-button @click="showAddProjectWin" type="primary"><el-icon><Plus /></el-icon>新增</el-button>
        <el-button @click="toEdits" type="primary"><el-icon><Edit/></el-icon>编辑</el-button>
        <el-button @click="toDeletes" type="primary"><el-icon><Delete/></el-icon>删除</el-button>
      </el-button-group>
    </el-col>
  </el-row>
  <!-- 数据列表 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-table :data="defects" border stripe ref="defectTable">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="defectId" label="#"/>
        <el-table-column prop="defectDescription" label="缺陷描述"/>
        <el-table-column prop="defectType" label="检测项类型"/>
        <el-table-column prop="defectGrade" label="缺陷等级"/>
        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-button-group>
                <el-button @click="toEdit(scope.row.defectId)" size="small" type="primary" plain>修改</el-button>
                <el-button @click="toDelete(scope.row)" size="small" type="danger" plain>删除</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>

  <!--  分页栏 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
    </el-col>
  </el-row>
  <!-- 新增项目的弹窗 -->
  <el-dialog v-model="defectAddWinDialogVisible"
             title="添加常见缺陷"
             width="50%"
  >
    <template #default>
      <el-form :model="newDefect">
        <el-form-item label="缺陷描述">
          <el-input v-model="newDefect.defectDescription"/>
        </el-form-item>
      </el-form>
      <el-form :model="newDefect" inline="true">
        <el-form-item label="检测项类型">
          <el-select style="width: 100px" v-model="newDefect.defectType">
            <el-option :value="0" label="外观检查"/>
            <el-option :value="1" label="结构检查"/>
            <el-option :value="2" label="尺寸检测"/>
            <el-option :value="3" label="涂层检查"/>
            <el-option :value="4" label="焊接检查"/>
            <el-option :value="5" label="质量检查"/>
            <el-option :value="6" label="连接检查"/>
            <el-option :value="7" label="原材料检查"/>
          </el-select>
        </el-form-item>
        <el-form-item label="缺陷等级">
          <el-select style="width: 100px" v-model="newDefect.defectGrade">
            <el-option :value="0" label="轻微"/>
            <el-option :value="1" label="中等"/>
            <el-option :value="2" label="严重"/>
          </el-select>
        </el-form-item>
      </el-form>

    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="addProjectSubmit">确定</el-button>
        <el-button @click="cancelAddProject">取消</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑子组件 -->
  <defectEdit :defect-id="editDefectId" @cancel-edit="cancelEdit" @editComplete="loadDefects()"/>

</template>
<script setup>
import {ArrowRight} from "@element-plus/icons-vue";
import {ref,onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import defectRequest from "@/api/defect.js";
import defectEdit from '@/views/qc/defect/defect-edit.vue'
// 封装搜索数据的对象
let defectQuery = ref({defectStatus:1});
//新增弹窗标记
let defectAddWinDialogVisible = ref(false);
// 保存新增项的表单的数据
let newDefect = ref({});
// 查询的项目列表
let defects = ref([]);
let defectTable = ref(null);
// 当前页码，默认1
let curPage = ref(1);
// 总条数，默认0
let total = ref(0);

// 编辑
let editDefectId = ref(-1);


function refresh(){
  defectQuery.value = {};
  loadDefects();
}



//新增事件
function showAddProjectWin() {
  defectAddWinDialogVisible.value = true;
}

//新增项目的提交按钮事件
function addProjectSubmit() {
  defectRequest.saveDefect(newDefect.value, res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "添加成功"
      });
      cancelAddProject();
    } else if (res.code == 300) {
      ElMessage({
        type: "warning",
        message: "项目编号重复"
      });
    } else {
      ElMessage({
        type: "warning",
        message: "项目添加失败"
      });
    }
  })
}
// 取消新增项目的按钮事件
function cancelAddProject() {
  // 将newProject置空
  newDefect = ref({});
  // 关闭弹窗
  defectAddWinDialogVisible.value = false;
}

//加载项目列表
function loadDefects() {
  // 调用API来查询项目列表
  defectRequest.loadDefects(defectQuery.value, curPage.value, 10, res => {
    // 这里的res就是后端返回的结果
    // 总条数赋值
    total.value = res.data.total;
    // 将查询的列表赋值给defects
    defects.value = res.data.list;
  })
}
// 分页事件
function changePage(value) {
  curPage.value = value;
  loadDefects();
}

/**
 * 工具栏编辑按钮事件
 */
function toEdits(){
  let selectedRows = defectTable.value.getSelectionRows();
  if(selectedRows.length > 1){
    ElMessage({
      type:"warning",
      message:"编辑只能编辑一条数据"
    });
  }else if (selectedRows.length == 0){
    ElMessage({
      type:"warning",
      message:"你没有选中任何数据"
    });
  }else{
    toEdit(selectedRows[0].defectId);
  }
}

function cancelEdit(){
  editDefectId.value = -1;
}
/**
 * 行编辑按钮事件
 * @param defectId
 */
function toEdit(defectId) {
  editDefectId.value = defectId;
}
/**
 * 编辑完成的事件
 */
function editCompletes(){
  // 更新数据表
  cancelEdit();
}



/**
 * 工具栏批量删除按钮事件
 */
function toDeletes(){
  let selectedRows = defectTable.value.getSelectionRows();
  if (selectedRows.length == 0){
    ElMessage({
      type:"warning",
      message:"你没有选中任何数据"
    });
    return;
  }
  ElMessageBox.confirm(
      '您确定要删除选中的项目吗？',
      'Warning',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(() => {

    let defectId = [];
    defectRequest.deletesProject(defectId,res=>{
      if(res.code == 200){
        ElMessage({
          type:"success",
          message:"成功删除[" + res.data + "]条数据"
        })
        loadDefects();
      }else{
        ElMessage({
          type:"warning",
          message:"删除失败"
        })
      }
    });
  }).catch(()=>{});
}

/**
 * 行删除按钮事件
 * @param
 */
function toDelete(defect) {
  ElMessageBox.confirm(
      '您确定要将项目[' + defect.defectDescription + "]删除吗？",
      'Warning',
      {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(() => {
    defectRequest.deleteProject(defect.defectId,res=>{
      ElMessage({
        type:"success",
        message:"操作完成"
      });
      loadDefects();
    })
  }).catch(()=>{});
}
onMounted(() => {
  loadDefects();
  changePage();
});
</script>

